<template>
	<view class="container">
		<!-- 经度{{longitude}}<br/> -->
		<!-- 纬度{{latitude}}<br/> -->
		<uni-segmented-control :current="currentIndex" :values="items" style-type="text" active-color="#007aff"
			@clickItem="onClickItem" />
		<!-- 第一页面 -->
		<view v-if="currentIndex === 0">
			<view style="padding: 10px;"></view>
			<!-- 补签次数 -->
			<view class="text-danger">
				<uni-row>
					<uni-col :span="12">
						<view class="view-center">
							<text>本月剩余补签：{{(kaoqinSetting.bukaMaxTimes - dakaInfo.bukaTimes) || 0}} 次</text>
						</view>

					</uni-col>
					<uni-col :span="12">


					</uni-col>
				</uni-row>
			</view>
			<!-- 打卡按钮 -->
			<view style="padding:25px;"></view>
			<button class="btn-daka" type="primary" @click="clickDaka">{{dakaButtonStr}}</button>

			<!-- 自动打卡 -->
			<view class="view-center" style="text-align: center;padding-left: 10px;padding-top: 20px;">
				<button size="mini" type="primary" plain @click="AutoDaka" style="margin: 10px;">
					<uni-icons type="calendar" color="#007AFF" ></uni-icons>
					自动打卡设置
				</button>
				<button size="mini" type="primary" plain @click="zhiban" style="margin: 10px;">
					<uni-icons type="gear" color="#007AFF"></uni-icons>
					节假日值班表
				</button>
			</view>

			<!-- 考勤列表最近30天 -->
			<view style="padding: 10px;"></view>
			<view class="dakalist">

				<uni-row v-for="(item, idx) in dakaList" :style="isToday(item.day)?'background-color: #E8F6FE;':''"
					:key="idx">
					<view v-if="item.sta != null && isToday(item.day) " >
						<uni-col :span="5">
							<view class="dakaline">
								<view style="padding:10px 0px 10px 0px;"></view>
								<view>
									<b>{{getFormatedTimeStr(item.day,"MM-DD")}}</b>
								</view>

								<view>
									{{getFormatedTimeDay(item.day)}}<br><br>
								</view>
								<!-- <view>
									<uni-tag v-if="isToday(item.day)" text="今天" type="warning" size="mini" />
								</view> -->
								<view>
									<uni-tag v-if="item.sta['id']==0" :text="item.sta['desc']" size="mini" />
								</view>
								<view>
									<uni-tag v-if="item.sta['id']==1" :text="item.sta['desc']" type="success"
										size="mini" />
								</view>
								<view>
									<uni-tag v-if="item.sta['id']==2" :text="item.sta['desc']" type="error"
										size="mini" />
								</view>
								<view>
									<uni-tag v-if="item.qingjiaInfo!=null" text="请假"  size="mini" />
								</view>
								<view>
									<uni-tag v-if="item.jiabanInfo!=null" text="加班" type="error" size="mini" />
								</view>
								<view>
									<uni-tag v-if="item.chuchaiInfo!=null" text="出差" type="success" size="mini" />
								</view>

							</view>
						</uni-col>


						<uni-col :span="19">
							<view class="dakaline">
								<view class="dakadata">
									<view>
										<uni-row>
											<uni-col :span="16">
												<view class="view-center dakadata-line">
													<view class="dakadata-time">
														<uni-icons
															:type="getShangbanDakaInfoStr(idx) != '未打卡'? 'star-filled' :'star'"
															size="16"></uni-icons>
														上班：{{getShangbanDakaInfoStr(idx) != '未打卡'? getShangbanDakaInfoStr(idx) :''}}<br>
														<uni-tag v-if="item.shangbanWaiqin==1" text="外勤" type="error"
															size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.shangbanTimeRes==1" text="迟到" type="success"
															size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.shangbanTimeRes==2" text="严重迟到"
															type="warning" size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.shangbanTimeRes==3" text="旷工" type="error"
															size="mini" inverted class="dakadata-tag" />
													</view>
												</view>
											</uni-col>
											<uni-col :span="8">
												<view class="view-center dakadata-line">
													<view style="text-align: center;">
														<button v-if="!afterToday(item.day)
														 && item.shangbanTime == -1 
														 && item.shangbanBukaSta == 0
														 && kaoqinSetting.bukaMaxTimes>=dakaInfo.bukaTimes
														 && getShangbanDakaInfoStr(idx) != '补卡审核中'" class="dakadata-buka" size="mini"
															@click="clickBuka(1, item.day, item.id)">补卡</button>
													</view>
												</view>
											</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="24">
												<view class="dakadata-weizhi"
													v-if="getShangbanDakaInfoStr(idx) != '未打卡'">
													<uni-icons type="location-filled" color="#999"></uni-icons>
													{{item.shangbanAddress}}
												</view>
											</uni-col>
										</uni-row>
									</view>
								</view>
								<view style="padding: 10px;"></view>


								<view class="dakadata">
									<view>
										<uni-row>
											<uni-col :span="16">
												<view class="view-center dakadata-line">
													<view class="dakadata-time">
														<uni-icons
															:type="getXiabanDakaInfoStr(idx) != '未打卡'? 'star-filled' :'star'"
															size="16"></uni-icons>
														下班：{{getXiabanDakaInfoStr(idx) != '未打卡'? getXiabanDakaInfoStr(idx) :''}}<br>
														<uni-tag v-if="item.xiabanWaiqin==1" text="外勤" type="error"
															size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.xiabanTimeRes==1" text="早退" type="success"
															size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.xiabanTimeRes==2" text="严重早退" type="warning"
															size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.xiabanTimeRes==3" text="旷工" type="error"
															size="mini" inverted class="dakadata-tag" />
													</view>
												</view>
											</uni-col>
											<uni-col :span="8">
												<view class="view-center dakadata-line">
													<view style="text-align: center;">
														<button v-if="!afterToday(item.day)
														 && item.xiabanTime == -1 
														 && item.xiabanBukaSta == 0
														 && kaoqinSetting.bukaMaxTimes>=dakaInfo.bukaTimes 
														 && getXiabanDakaInfoStr(idx) != '补卡审核中'" class="dakadata-buka" size="mini"
															@click="clickBuka(1, item.day, item.id)">补卡</button>
													</view>
												</view>
											</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="24">
												<view class="dakadata-weizhi" v-if="getXiabanDakaInfoStr(idx) != '未打卡'">
													<uni-icons type="location-filled" color="#999"></uni-icons>
													{{item.xiabanAddress}}
												</view>
											</uni-col>
										</uni-row>
									</view>
								</view>


							</view>

						</uni-col>
					</view>

				</uni-row>

				<uni-row>
					<uni-col :span="24">
						<view class="dakatitle  view-center" @click="lishichange()">
							<view v-if="lishidata==0">打开考勤记录</view>
							<view v-if="lishidata==1">关闭考勤记录</view>
						</view>
					</uni-col>


				</uni-row>
				
				<uni-row v-for="(item, idx) in dakaList" :style="isToday(item.day)?'background-color: #E8F6FE;':''"
					:key="idx" v-if="lishidata==1">
					<view v-if="item.sta != null && idx>0">
						<uni-col :span="5">
							<view class="dakaline">
								<view style="padding:10px 0px 10px 0px;"></view>
								<view>
									<b>{{getFormatedTimeStr(item.day,"MM-DD")}}</b>
								</view>
				
								<view>
									{{getFormatedTimeDay(item.day)}}<br><br>
								</view>
								<view>
									<uni-tag v-if="item.sta['id']==0" :text="item.sta['desc']" size="mini" />
								</view>
								<view>
									<uni-tag v-if="item.sta['id']==1" :text="item.sta['desc']" type="success"
										size="mini" />
								</view>
								<view>
									<uni-tag v-if="item.sta['id']==2" :text="item.sta['desc']" type="error"
										size="mini" />
								</view>
								<view>
									<uni-tag v-if="item.qingjiaInfo!=null" text="请假"  size="mini" />
								</view>
								<view>
									<uni-tag v-if="item.jiabanInfo!=null" text="加班" type="error" size="mini" />
								</view>
								<view>
									<uni-tag v-if="item.chuchaiInfo!=null" text="出差" type="success" size="mini" />
								</view>
				
							</view>
						</uni-col>
				
				
						<uni-col :span="19">
							<view class="dakaline">
								<view class="dakadata">
									<view>
										<uni-row>
											<uni-col :span="14">
												<view class="view-center dakadata-line">
													<view class="dakadata-time">
														<uni-icons
															:type="getShangbanDakaInfoStr(idx) != '未打卡'? 'star-filled' :'star'"
															size="16"></uni-icons>
														上班：{{getShangbanDakaInfoStr(idx) != '未打卡'? getShangbanDakaInfoStr(idx) :''}}<br>
														<uni-tag v-if="item.shangbanWaiqin==1" text="外勤" type="error"
															size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.shangbanTimeRes==1" text="迟到" type="success"
															size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.shangbanTimeRes==2" text="严重迟到"
															type="warning" size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.shangbanTimeRes==3" text="旷工" type="error"
															size="mini" inverted class="dakadata-tag" />
													</view>
												</view>
											</uni-col>
											<uni-col :span="10">
												<view class="view-center dakadata-line">
													<view style="text-align: center;">
														<button v-if="!afterToday(item.day)
														 && item.shangbanTime == -1 
														 && item.shangbanBukaSta == 0
														 && kaoqinSetting.bukaMaxTimes>=dakaInfo.bukaTimes
														 && getShangbanDakaInfoStr(idx) != '补卡审核中'" size="mini"
															@click="clickBuka(1, item.day, item.id)">补卡</button>
													</view>
												</view>
											</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="24">
												<view class="dakadata-weizhi"
													v-if="getShangbanDakaInfoStr(idx) != '未打卡'">
													<uni-icons type="location-filled" color="#999"></uni-icons>
													{{item.shangbanAddress}}
												</view>
											</uni-col>
										</uni-row>
									</view>
								</view>
								<view style="padding: 5px;"></view>
				
								<view class="dakadata">
									<view>
										<uni-row>
											<uni-col :span="14">
												<view class="view-center dakadata-line">
													<view class="dakadata-time">
														<uni-icons
															:type="getXiabanDakaInfoStr(idx) != '未打卡'? 'star-filled' :'star'"
															size="16"></uni-icons>
														下班：{{getXiabanDakaInfoStr(idx) != '未打卡'? getXiabanDakaInfoStr(idx) :''}}<br>
														<uni-tag v-if="item.xiabanWaiqin==1" text="外勤" type="error"
															size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.xiabanTimeRes==1" text="早退" type="success"
															size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.xiabanTimeRes==2" text="严重早退" type="warning"
															size="mini" inverted class="dakadata-tag" />
														<uni-tag v-if="item.xiabanTimeRes==3" text="旷工" type="error"
															size="mini" inverted class="dakadata-tag" />
													</view>
												</view>
											</uni-col>
											
											<uni-col :span="10">
												<view class="view-center dakadata-line">
													<view style="text-align: center;">
														<button v-if="!afterToday(item.day)
														 && item.xiabanTime == -1 
														 && item.xiabanBukaSta == 0
														 && kaoqinSetting.bukaMaxTimes>=dakaInfo.bukaTimes 
														 && getXiabanDakaInfoStr(idx) != '补卡审核中'" size="mini"
															@click="clickBuka(2, item.day, item.id)">补卡</button>
													</view>
												</view>
											</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="24">
												<view class="dakadata-weizhi" v-if="getXiabanDakaInfoStr(idx) != '未打卡'">
													<uni-icons type="location-filled" color="#999"></uni-icons>
													{{item.xiabanAddress}}
												</view>
											</uni-col>
										</uni-row>
									</view>
								</view>
				
				
							</view>
				
						</uni-col>
					</view>
				
				</uni-row>
				<uni-row>
					<uni-col :span="24">
						<view class="dakatitle  view-center" @click="lishichange()" v-if="lishidata==1">
							<view v-if="lishidata==0">打开考勤记录</view>
							<view v-if="lishidata==1">关闭考勤记录</view>
						</view>
					</uni-col>
				
				
				</uni-row>

				
			</view>
			<view style="padding: 10px;"></view>

		</view>
		<!-- 第二页面 -->
		<view v-if="currentIndex === 1" v-for="(item, idx) in dakaStatis" :key="idx">
			<view style="padding: 10px;"></view>
			<uni-section :title="item.year + '年' + item.month + '月考勤统计'" type="line">
				<uni-list>
					<uni-list-item title="上班未打卡" :rightText="item.shangbanweidaka + '次'" />
					<uni-list-item title="下班未打卡" :rightText="item.xiabanweidaka + '次'" />
					<uni-list-item title="迟到次数" :rightText="item.chidao + '次'" />
					<uni-list-item title="早退次数" :rightText="item.zaotui + '次'" />
					<!-- <uni-list-item title="外勤次数" :rightText="item.waiqin + '次'" /> -->
					<uni-list-item title="请假天数" :rightText="item.qingjia + '天'" />
					<uni-list-item title="出差天数" :rightText="item.chuchai + '天'" />
					<uni-list-item title="加班次数" :rightText="item.jiabancishu + '次'" />
					<uni-list-item title="加班时长" :rightText="item.jiabanshichang + '小时'" />
					<uni-list-item title="补卡次数" :rightText="item.buka + '次'" />
				</uni-list>
			</uni-section>
		</view>

	</view>
</template>

<script>
	import store from '../../store'
	import {
		websock
	} from '../../net/websock'
	import moment from 'moment'

	export default {
		data() {
			return {
				store,
				ruleStr: '',
				timeSetting: null,
				// 打卡列表
				dakaList: [],
				// 考勤设置
				kaoqinSetting: {},
				// 打卡信息
				dakaInfo: {},
				// 打卡统计
				dakaStatis: [],
				longitude: 0,
				latitude: 0,
				address: '',
				msg: '',
				// 打卡按钮文字
				dakaButtonStr: '',
				timer: null,
				// 切换页面文字
				items: ['考勤打卡', '个人统计'],
				// 默认标签ID
				currentIndex: 0,

				msgType: 'success',
				messageText: '这是一条成功提示',

				lishidata: 0,
			}
		},
		async onLoad() {
			try {

				this.getLocation()

				this.kaoqinSetting = await websock.getKaoqinSetting()
				// console.log('kaoqin setting', this.kaoqinSetting)

				await this.getDakaList()
				await this.getDakaInfo()

				this.dakaStatis = await websock.personalKaoqinStatis()

				// console.log('daka statis', this.dakaStatis)
			} catch (err) {
				console.error(err)
				uni.showToast({
					// title: err.message || 'error',
					title: err.message,
					icon: fail,
					position: top,
				})
			}

			this.timer = setInterval(() => {
				let d = new Date()
				let hour = d.getHours()
				let curStr = moment().format('HH:mm:ss')
				if (hour < 12) {
					this.dakaButtonStr = '上班打卡' + curStr
				} else {
					this.dakaButtonStr = '下班打卡' + curStr
				}
			}, 200)
		},
		onUnload() {
			clearInterval(this.timer)
		},

		methods: {
			lishichange() {
				if (this.lishidata == 0) {
					this.lishidata = 1
				} else {
					this.lishidata = 0
				}
			},

			// 自动打开
			AutoDaka() {
				uni.navigateTo({
					url: "/pages/kaoqin/dakasetting"
				})
			},
			// 自动打开
			zhiban() {
				uni.navigateTo({
					url: "/pages/xingzheng/chakanpaiban"
				})
			},
			// 获取本地定位
			async getLocation() {
				uni.getLocation({
					// type: 'wgs84',
					type: 'gcj02',
					geocode: true,
					success: res => {
						this.longitude = res.longitude
						this.latitude = res.latitude
						console.log('get location success1111111', res)
						this.address = ''
						if (res.address) {
							this.address += (res.address.province || '')
							this.address += (res.address.city || '')
							this.address += (res.address.district || '')
							this.address += (res.address.street || '')
							this.address += (res.address.streetNum || '')
							this.address += (res.address.poiName || '')
						}
					},
					fail: () => {
						console.log('get location fail')
						uni.showToast({
							title: '获取位置信息失败'
						})
					},
					complete: () => {
						console.log('get location complete')
					}
				})
			},
			// 获取打卡详情
			async getDakaInfo() {
				this.dakaInfo = await websock.getTodayDakaDetail()
			},
			// 获取打卡列表
			async getDakaList() {
				this.dakaList = await websock.dakaList()
				console.log('daka list', this.dakaList)
			},

			// 打卡逻辑,中午12点前为上班打开,之后为下班打卡
			async clickDaka() {
				let hour = new Date().getHours()
				if (hour < 12) {
					await websock.daka({
						dakaType: 1,
						longitude: this.longitude,
						latitude: this.latitude,
						address: this.address
					})
					await this.getDakaList()
				} else {
					await websock.daka({
						dakaType: 2,
						longitude: this.longitude,
						latitude: this.latitude,
						address: this.address
					})
					await this.getDakaList()
				}
			},

			// 切换标签
			onClickItem(e) {
				if (this.currentIndex !== e.currentIndex) {
					this.currentIndex = e.currentIndex
				}
			},


			// getShangbanDakaSettingTimeStr() {
			// 	if (!this.timeSetting) return ''
			// 	let hourStr = this.timeSetting.shangbanHour + ''
			// 	let minuteStr = this.timeSetting.shangbanMinute + ''
			// 	if (this.timeSetting.shangbanMinute < 10) {
			// 		minuteStr = '0' + this.timeSetting.shangbanMinute
			// 	}
			// 	return hourStr + ':' + minuteStr
			// },
			// 上班状态
			getShangbanDakaInfoStr(idx) {
				if (this.dakaList[idx].shangbanTime == -1 && this.dakaList[idx].shangbanBukaSta == 0) return '未打卡'
				if (this.dakaList[idx].shangbanBukaSta == 1) return '补卡审核中'
				if (this.dakaList[idx].shangbanBukaSta == 2) return '补卡通过'
				if (this.dakaList[idx].shangbanBukaSta == 3) return '补卡拒绝'

				return moment(this.dakaList[idx].shangbanTime).format('HH:mm')
			},
			isShowShanbanBuka(idx) {
				if (this.dakaList[idx].shangbanTime == -1 && this.dakaList[i].shangbanBukaSta == 0) return true
			},
			// 下班状态
			getXiabanDakaSettingTimeStr() {
				if (!this.timeSetting) return ''
				let hourStr = this.timeSetting.xiabanHour + ''
				let minuteStr = this.timeSetting.xiabanMinute + ''
				if (this.timeSetting.xiabanMinute < 10) {
					minuteStr = '0' + this.timeSetting.xiabanMinute
				}
				return hourStr + ':' + minuteStr
			},
			// 获取下班打卡信息
			getXiabanDakaInfoStr(idx) {
				if (this.dakaList[idx].xiabanTime == -1 && this.dakaList[idx].xiabanBukaSta == 0) return '未打卡'
				if (this.dakaList[idx].xiabanBukaSta == 1) return '补卡审核中'
				if (this.dakaList[idx].xiabanBukaSta == 2) return '补卡通过'
				if (this.dakaList[idx].xiabanBukaSta == 3) return '补卡拒绝'

				return moment(this.dakaList[idx].xiabanTime).format('HH:mm')
			},
			// 获取格式化时间字符串
			getFormatedTimeStr(stamp, str = 'MM-DD HH:mm:ss') {
				return moment(stamp).format(str)
			},
			// 返回周几
			getFormatedTimeDay(stamp, str = '周') {
				return '周' + ['日', '一', '二', '三', '四', '五', '六'][moment(stamp).day()]
			},
			isToday(dat) {
				return moment(dat).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')
			},
			afterToday(dat) {
				return moment(dat).format('YYYY-MM-DD') >= moment().format('YYYY-MM-DD')
			},
			getPaibanStr(idx) {
				if (this.dakaList[idx].paiban == 1) return '上班'
				return '休息'
			},
			clickBuka(bukaType, day, id) {
				uni.navigateTo({
					url: `/pages/kaoqin/bukaApply?id=${id}&bukaType=${bukaType}&day=${day}`
				})
			}
		}
	}
</script>

<style>
	@import url("../common/daka.css");
</style>
